import React, { useState } from 'react'
import { SideBar } from 'antd-mobile'
import { tabs } from './tabs'
import './index.scss'
import classNames from 'classnames'
import { NavBar } from 'react-vant';
import { useNavigate } from 'react-router-dom'
const Index: React.FC = () => {
    const navigate = useNavigate()
    const [activeKey, setActiveKey] = useState('key1')
    const okjjs = () => {
        navigate('/sryisheng')
    }
    return (
        <div className='container'>
            <NavBar fixed={true}
                title="选择科室"
                leftText="X"
                onClickLeft={() => navigate(-1)}
            />
            <div className='side'>
                <SideBar activeKey={activeKey} onChange={setActiveKey}>
                    {tabs.map(item => (
                        <SideBar.Item key={item.key} title={item.title} />
                    ))}
                </SideBar>
            </div>
            <div className='main'>
                {
                    tabs.map(item => (
                        <div
                            key={item.key}
                            className={classNames(
                                'content',
                                activeKey === item.key && 'active'
                            )}
                        >
                            {item.title}
                            {
                                item.children.map((item1: any, index: any) => {
                                    return <p key={index} onClick={okjjs}>{item1.name}</p>
                                })
                            }
                        </div>
                    ))
                }
            </div>
        </div>
    )
}

export default Index
